<nz-row [nzGutter]="16">
  <nz-col [nzMd]="24">
    <nz-row style="height: 60px;" [nzType]="'flex'" [nzJustify]="'space-around'" [nzAlign]="'middle'">
      <nz-col [nzSpan]="24">
        <form nz-form [formGroup]="validateForm" [nzLayout]="'inline'">
          <nz-form-item>
            <nz-form-label>分类名称</nz-form-label>
            <nz-form-control>
              <input nz-input nzSize="default" [placeholder]="'请输入'" [(ngModel)]="knowledgeName" formControlName="knowledgeName">
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="search()">
                <i class="anticon anticon-search"></i>
                {{'list.text.search' | translate}}
              </button>
            </nz-form-control>
          </nz-form-item>

          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="showModify()">{{'modify.text.add' | translate}}</button>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-control>
              <button nz-button [nzType]="'primary'" (click)="refresh()">
                <i class="anticon anticon-sync"></i>
              </button>
            </nz-form-control>
          </nz-form-item>
        </form>
      </nz-col>
    </nz-row>
    <nz-row>
      <nz-table #nzTable
                nzSize="middle"
                [nzData]="data"
                nzFrontPagination="false"
                nzShowSizeChanger="true"
                nzShowQuickJumper="true"
                [nzLoading]="_loading"
                [(nzPageIndex)]="page.pageNo"
                [(nzPageSize)]="page.pageSize"
                [nzTotal]="page.total"
                (nzPageIndexChange)="getKnowledgeByPage()"
                (nzPageSizeChange)="getKnowledgeByPage(true)"
                [nzShowTotal]="pagination"
      >
        <thead>
        <tr>
          <th [nzWidth]="'22%'">
            <span>分类名称</span>
          </th>
          <th>
            <span>更新时间</span>
          </th>
          <th>
            <span>操作</span>
          </th>
        </tr>
        </thead>
        <tbody>
        <ng-template ngFor let-data [ngForOf]="nzTable.data">
          <ng-template ngFor let-item [ngForOf]="expandDataCache[data.id]">
            <tr *ngIf="(item.parent && item.parent.expand)||!(item.parent)">
              <td [nzIndentSize]="item.level*20" [nzShowExpand]="!!item.knowledgeList" [(nzExpand)]="item.expand" (nzExpandChange)="collapse(expandDataCache[data.id],item,$event)">
                <i *ngIf="!item.areaList" style="display: inline-block;width: 16px;"></i>&nbsp;&nbsp;{{item.knowledgeName}}
              </td>
              <td>{{item.gmtModified | date:'yyyy-MM-dd HH:mm:ss'}}</td>
              <td>
                <a (click)="showModify(item)">{{'modify.text.edit' | translate}}</a>
                <nz-divider nzType="vertical"></nz-divider>
                <nz-popconfirm [nzTitle]="'modify.text.delete_tip' | translate" (nzOnConfirm)="delete(item.id)" [nzPlacement]="'top'">
                  <a nz-popconfirm>{{'modify.text.delete' | translate}}</a>
                </nz-popconfirm>
              </td>
            </tr>
          </ng-template>
        </ng-template>
        </tbody>
      </nz-table>
      <ng-template #pagination>
        {{'list.text.pagination' | translate}} {{page.total}} {{'list.text.article' | translate}}
      </ng-template>
    </nz-row>
  </nz-col>
</nz-row>

